<template>
  <div class="container">
    <ul class="imgs">
      <li v-for="(img,index) in bgimags" @click="change(img)" :key="index"><img :src="img.path"></li>
    </ul>
  </div>

</template>

<script>
export default {
  name: "ChangeImage",
  data(){
    return {
      bgimags:[
        {
          path:"/images/backgroundimg/bg01.jpeg"
        },
        {
          path:"/images/backgroundimg/bg02.jpeg"
        },
        {
          path:"/images/backgroundimg/bg03.jpeg"
        },
        {
          path:"/images/backgroundimg/bg04.jpeg"
        }
      ]

    }
  },
  methods:{
    change(img){
      console.log(img);
      var body = document.body
      body.style.backgroundImage="url("+img.path+")";
      body.style.backgroundRepeat="no-repeat";
      body.style.backgroundAttachment='fixed';
    }
  }
}
</script>

<style scoped>
.imgs{
  display: flex;
  justify-content: center;
}
ul li img{
  width: 50%;
}
</style>